<template>
    <div><Finger/></div>
    <div class="con">
        <div class="con_one">
            <h1>{{sum.title}}</h1>
        </div>
        <!-- 时间div -->
        <div class="con_two">
            <span class="con_left">作者：{{sum.zuo}}</span>
            <span class="con_right">发表时间：{{sum.time}}</span>
        </div>
        <!-- 内容 -->
        <div class="con_there">
            <p v-for="item,index in array" :key="index">
                {{item}}
            </p>
        </div>
        <!-- 展示点赞 差评 评论 -->
        <el-card shadow="always" class="con_five">
            <div>
            <!-- 左边发表人的名字和头像 -->
            <div class="con_five_left">
                <el-avatar
                    :size="40"
                    :src="sum.src"
                    class="icon"
                ></el-avatar>
                <span class="biaoti">{{sum.zuo}}</span>
            </div>
            <div class="con_five_right">
                <div class="good">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="none" d="M0 0h24v24H0z"/><path d="M6.455 19L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6.455zM4 18.385L5.763 17H20V5H4v13.385zm8.018-3.685L8.659 11.34a2.25 2.25 0 0 1 3.182-3.182l.177.177.177-.177a2.25 2.25 0 0 1 3.182 3.182l-3.36 3.359z" fill="rgba(149,164,166,1)"/></svg>
                    <span>{{sum.good}}</span>
                </div>
                <div class="low">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="none" d="M0 0h24v24H0z"/><path d="M6.455 19L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6.455zM4 18.385L5.763 17H20V5H4v13.385zM13.414 11l2.475 2.475-1.414 1.414L12 12.414 9.525 14.89l-1.414-1.414L10.586 11 8.11 8.525l1.414-1.414L12 9.586l2.475-2.475 1.414 1.414L13.414 11z" fill="rgba(149,164,166,1)"/></svg>
                    <span>{{sum.low}}</span>
                </div>
                <div class="comments">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="none" d="M0 0h24v24H0z"/><path d="M6.455 19L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6.455zm-.692-2H20V5H4v13.385L5.763 17zM11 10h2v2h-2v-2zm-4 0h2v2H7v-2zm8 0h2v2h-2v-2z" fill="rgba(149,164,166,1)"/></svg>
                    <span>{{sum.comments}}</span>
                </div>
            </div>
        </div>
        </el-card>
        <!-- 展示最高的两个数据 -->
        <div class="con_frive">
            <ReMen/>
        </div>
        <!-- 评论区 -->
        <div class="con_six">
            <PingLun :sum="sum"/>
        </div>
    </div>
    <!-- 返回顶部 -->
    <div>
        <el-backtop :bottom="300" class="back">
            <div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 12v8h-2v-8H4l8-8 8 8z" fill="rgba(149,164,166,1)"/></svg>
            </div>
        </el-backtop>
    </div>
</template>
<script>
import Finger from '@/components/LoginZi/Finger.vue'
import { useRoute } from 'vue-router';
import { reactive, toRefs } from 'vue';
import {Context} from '@/Element-api/context.js'
// 热门模块
import ReMen from '@/components/Detail/Remen/ReMen'
// 评论模板
import PingLun from '@/components/Detail/PingLun/pinglun'
export default {
    components:{Finger,ReMen,PingLun},
    setup(){
        const route = useRoute()
        const shuju = reactive({
            sum:{},
            array:[],
            newArray:[]
        })
        shuju.sum = route.query
        // 调用 封装格式化内容的接口
        shuju.array = Context(shuju.sum.context,'\n')
        console.log(shuju.sum);
        // 把数组中多余的空格去掉
        return{
           ...toRefs(shuju)
        }
    }
}
</script>
<style lang="less" scoped>
    .con{
        width: 800px;
        height: auto;
        margin: 30px auto;
        min-width: 1500px;
        .con_one{
            width: 100%;
            height: 70px;
            line-height: 70px;
            text-align: center;
            letter-spacing: 4px;
        }
        .con_two{
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 18px;
            color: rgb(47, 85, 81);
            .con_left{
                text-align: left;
                padding-left: 20px;
            }
            .con_right{
                float: right;
            }
        }
        .con_there{
            width: 95%;
            height: auto;
            margin: 20px auto;
            line-height: auto;
            text-indent: 2rem;
            border-bottom: 1px solid #ccc;
            border-radius: 5px;
            p{
                height: auto;
                color: rgb(0, 0, 0);
                padding: 10px;
            }
        }
        .con_five{
            width: 95%;
            height: 60px;
            background: rgb(186, 203, 255);
            margin: 10px auto;
            border-radius: 5px;
            position: relative;
            .con_five_left{
                width: 200px;
                height: 60px;
                position: absolute;
                top: 0;
                left: 0;
                .icon{
                    position: absolute;
                    left: 60px;
                    top: 50%;
                    bottom: 50%;
                    transform: translateY(-50%);
                }
                .biaoti{
                    position: absolute;
                    top: 25%;
                    left: 110px;
                    font-size: 20px;
                    font-weight: bold;
                }
            }
            .con_five_right{
                width: 250px;
                height: 60px;
                position: absolute;
                right: 30px;
                top: 50%;
                bottom: 50%;
                transform: translateY(-50%);
                display: flex;
                text-align: center;
                div{
                    flex: 1;
                    padding-top: 15px;
                }
                span{
                    font-size: 15px;
                    color: rgb(126, 63, 63);
                }
            }
        }
        .con_frive{
            width: 95%;
            height: auto;
            margin: 15px auto;
        }
        .con_six{
            width: 95%;
            height: 500px;
            margin: 15px auto;
        }
    }
    .heng{
        width: 100%;
        border-bottom: 1px solid #ccc;
        margin-bottom: 30px;
    }
</style>
